<!--
 * @author: sanbao
 * @Date: 2022-07-23 10:37:49
-->
<style lang='scss' scoped>
</style>

<template>
  <div class="orders">
    <my-top :toplist="toplist" @handeltopbutton="handeltopbutton"></my-top>
    <my-table
      :tableData="tableData"
      :tablelist="tablelist"
      @handleSizeChange="handleSizeChange"
      @handleCurrentChange="handleCurrentChange"
      :pager="pager"
    ></my-table>
    <!-- @handeltablebutton="handeltablebutton"
   -->
  </div>
</template>

<script lang='ts'>
import MyTable from "@/components/child/MyTable.vue";
import MyTop from "@/components/child/MyTop.vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { OrderData } from "@/type/oredees";
import {
  defineComponent,
  ref,
  reactive,
  toRefs,
  computed,
  onMounted,
} from "vue";
import RrdersModel from "@/api/orders";
export default defineComponent({
  components: { MyTable, MyTop },
  setup() {
    onMounted(() => {
      getorderslist();
    });
    const data = reactive(new OrderData());
    const list = reactive({
      topVal: "",
    });
    const getorderslist = async () => {
      const response = await RrdersModel.getreportslist(
        data.pager.currentPage,
        data.pager.pageSize,
        list.topVal
      );
      console.log(response.data.data);
      const { total, goods } = response.data.data;
      data.tableData = goods;
      data.pager.total = total;
    };
    // top按钮
    interface handeltopbutton {
      action: any;
      topVal: any;
    }
    const handeltopbutton = (anyEI: handeltopbutton) => {
      const { action, topVal } = anyEI;
      if (action == "seach") {
        // 搜索
        list.topVal = topVal.seachVal || "";
        getorderslist().then(() => ElMessage.success("搜索成功"));
      } else if (action == "add") {
        console.log("add");
      }
    };
    // 页
    const handleSizeChange = (size: number) => {
      data.pager.pageSize = size;
      getorderslist().then(() => ElMessage.success("搜索成功"));
    };
    // 条
    const handleCurrentChange = (page: number) => {
      data.pager.currentPage = page;
      getorderslist().then(() => ElMessage.success("搜索成功"));
    };
    return {
      ...toRefs(data),
      handeltopbutton,
      handleSizeChange,
      handleCurrentChange,
    };
  },
});
</script>

